<template>
  <div class="tickets-container">
    <el-header style="height: 60px; background-color: #409EFF; color: white;">
      <div class="header-content">
        <span>景点门票</span>
        <el-button type="text" @click="showSideDrawer = true">菜单</el-button>
      </div>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="24">
          <div class="search-bar">
            <el-input placeholder="景点/目的地" v-model="searchText"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="hot-search">
            <span>热搜：</span>
            <el-tag type="info" v-for="(item, index) in hotSearchList" :key="index">{{ item }}</el-tag>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="banner">
            <el-carousel height="200px">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <img :src="item.imageUrl" alt="" style="width: 100%; height: 100%;" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="filter">
            <div class="dropdown-item">
              <el-dropdown>
                <span class="el-dropdown-link">
                  全部景点<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>选项一</el-dropdown-item>
                  <el-dropdown-item>选项二</el-dropdown-item>
                  <el-dropdown-item>选项三</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="dropdown-item">
              <el-dropdown>
                <span class="el-dropdown-link">
                  全城<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>选项一</el-dropdown-item>
                  <el-dropdown-item>选项二</el-dropdown-item>
                  <el-dropdown-item>选项三</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="dropdown-item">
              <el-dropdown>
                <span class="el-dropdown-link">
                  智能排序<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>选项一</el-dropdown-item>
                  <el-dropdown-item>选项二</el-dropdown-item>
                  <el-dropdown-item>选项三</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="ticket-list">
            <div class="ticket-item" v-for="(item, index) in ticketList" :key="index">
              <div class="ticket-img">
                <img :src="item.imageUrl" alt="" />
              </div>
              <div class="ticket-info">
                <div class="name">{{ item.name }}</div>
                <div class="rating">
                  <el-rate :value="item.rating" :readOnly="true"></el-rate>
                  <span>{{ item.rating }}分</span>
                </div>
                <div class="description">{{ item.description }}</div>
                <div class="price">
                  <span>门票 ¥{{ item.price }}</span>
                  <el-button
                    type="primary"
                    v-if="item.canBookToday"
                  >可订今日</el-button>
                  <el-button
                    type="success"
                    v-else-if="item.needReservation"
                  >预订：需要提前预约</el-button>
                  <el-button
                    type="warning"
                    v-else
                  >售罄</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>

    <el-drawer title="侧边栏" :visible.sync="showSideDrawer" direction="ltr">
      <div>侧边栏内容</div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSideDrawer: false,
      searchText: '',
      hotSearchList: ['水上乐园', '欢乐谷', '度假村', '温泉'],
      bannerList: [
        { imageUrl: 'https://placehold.co/300x200?text=景区图片' },
        { imageUrl: 'https://placehold.co/300x200?text=景区图片' }
      ],
      ticketList: [
        {
          imageUrl: 'https://placehold.co/200x200?text=景区图片',
          name: '北京环球度假村',
          rating: 5,
          description: '公园游乐场 | 梨园，距我1.8km',
          price: '500起',
          canBookToday: true
        },
        {
          imageUrl: 'https://placehold.co/200x200?text=景区图片',
          name: '故宫博物院',
          rating: 5,
          description: '名胜古迹 | 王府井，距我1.4km',
          price: '60起',
          needReservation: true
        },
        {
          imageUrl: 'https://placehold.co/200x200?text=景区图片',
          name: '北京欢乐谷',
          rating: 5,
          description: '公园游乐场 | 北京，距我6.8km',
          price: '200起',
          canBookToday: false,
          needReservation: false
        }
      ]
    };
  },
  methods: {
    handleSearch() {
      // 这里可以添加搜索的逻辑
      console.log('执行搜索', this.searchText);
    }
  }
};
</script>

<style scoped>
.tickets-container {
  width: 100%;
  margin: 0 auto;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.search-bar {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot-search {
  margin-top: 10px;
}

.banner {
  margin-top: 20px;
}

.filter {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.dropdown-item {
  margin-bottom: 10px;
}

.ticket-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.ticket-item {
  margin-bottom: 10px;
  display: flex;
  border: 1px solid #ddd;
  padding: 10px;
}

.ticket-img {
  flex: 0 0 40%;
}

.ticket-info {
  flex: 1;
  margin-left: 10px;
}

.name {
  font-size: 16px;
  font-weight: bold;
}

.rating {
  margin-top: 5px;
}

.description {
  margin-top: 5px;
  color: #666;
}

.price {
  margin-top: 10px;
}
</style>
